<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./css/index.css" />

    <link rel="stylesheet" href="./component/tab/sc-tabx.css" />
    <link rel="stylesheet" href="./component/common/sc-common.css" />
    <link rel="stylesheet" href="./component/dialog/sc-dialog.css" />
    <link rel="stylesheet" href="./component/layout/sc-layout.css" />
    <link rel="stylesheet" href="./component/toolbar/sc-toolbar.css" />
    <link rel="stylesheet" href="./component/statusbar/sc-statusbar.css" />
    <link rel="stylesheet" href="./component/ruler/sc-ruler.css" />
    <link rel="stylesheet" href="./component/script/sc-script.css" />
    <link rel="stylesheet" href="./component/slash/sc-slash.css" />

    <link rel="stylesheet" href="./component/toolbar/component/annotation/sc-annotation-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/image/sc-image-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/table/sc-table-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/find/sc-find-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/input/sc-input-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/checkbox/sc-checkbox-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/radio/sc-radio-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/drawer/sc-drawer.css" />
    <link rel="stylesheet" href="./component/toolbar/component/nav/sc-nav-view.css" />
    <link rel="stylesheet" href="./component/toolbar/component/pageset/sc-page-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/pagenum/sc-pagenum-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/watermark/sc-watermark-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/expression/sc-expression-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/barcode/sc-barcode-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/qrcode/sc-qrcode-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/line/sc-line-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/print/sc-print-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/title/sc-title-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/splitcell/sc-splitcell-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/tablebordertype/sc-tablebordertype-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/tableborderline/sc-tableborderline-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/cellalign/sc-cellalign-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/cellpadding/sc-cellpadding-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/colrow/sc-colrowsize-setting.css" />
    <link rel="stylesheet" href="./component/toolbar/component/expression/toothmap/sc-toothmap.css" />
    <link rel="stylesheet" href="./component/toolbar/component/eleview/sc-element-view.css" />
    <link rel="stylesheet" href="./component/toolbar/component/datasource/sc-datasource.css" />

    <link rel="stylesheet" href="./component/number/sc-number.css" />
    <link rel="stylesheet" href="./component/calendar/sc-calendar.css" />
    <link rel="stylesheet" href="./component/contextmenu/sc-context-menu.css" />

    <style>
        body{
            margin: 0;
            padding: 20px 60px; 
            background-color: #f9f9f9;
            overflow: hidden; 
        }

        #layout-container{
            border: 1px solid #bbb;
        }
    </style>
</head>

<body>
    <div>
        <div id="layout-container">
            <slot position="head" component="scToolbar">
            </slot>
            <slot position="body" loader="editorLoader">
                <slot position="left" component="scLeftDrawer"></slot>
                <slot position="right" component="scRightDrawer"></slot>
            </slot>
            <slot position="foot" component="scStatusbar">
            </slot>
        </div>
        <!-- <div id="layout-container2">
            <slot position="head" component="scToolbar">
            </slot>
            <slot position="body" loader="editorLoader">
            </slot>
            <slot position="foot" component="scStatusbar">
            </slot>
        </div> -->
    </div>
</body>

<script src="./third_library/diff.js"></script>
<script src="./third_library/jsBarcode.js"></script>
<script src="./third_library/qrcode.js"></script>
<script src="./third_library/html2canvas.js"></script>

<script src="./asset/s-resources.js"></script>
<script src="./asset/s-menus.js"></script>
<script src="./asset/s-script-funcs.js"></script>

<script src="./component/tab/sc-tabx.js"></script>
<script src="./component/common/sc-common.js"></script>
<script src="./component/dialog/sc-dialog.js"></script>
<script src="./component/calendar/sc-calendar.js"></script>
<script src="./component/contextmenu/sc-context-menu.js"></script>
<script src="./component/number/sc-number.js"></script>
<script src="./component/ruler/sc-ruler.js"></script>
<script src="./component/script/sc-script.js"></script>
<script src="./component/slash/sc-slash.js"></script>

<script src="./component/toolbar/component/annotation/sc-annotation-setting.js"></script>
<script src="./component/toolbar/component/image/sc-image-setting.js"></script>
<script src="./component/toolbar/component/table/sc-table-setting.js"></script>
<script src="./component/toolbar/component/colorpicker/sc-colorpicker-setting.js"></script>
<script src="./component/toolbar/component/find/sc-find-setting.js"></script>
<script src="./component/toolbar/component/input/sc-input-setting.js"></script>
<script src="./component/toolbar/component/checkbox/sc-checkbox-setting.js"></script>
<script src="./component/toolbar/component/radio/sc-radio-setting.js"></script>
<script src="./component/toolbar/component/drawer/sc-drawer.js"></script>
<script src="./component/toolbar/component/nav/sc-nav-view.js"></script>
<script src="./component/toolbar/component/pageset/sc-page-setting.js"></script>
<script src="./component/toolbar/component/pagenum/sc-pagenum-setting.js"></script>
<script src="./component/toolbar/component/watermark/sc-watermark-setting.js"></script>
<script src="./component/toolbar/component/expression/sc-expression-setting.js"></script>
<script src="./component/toolbar/component/barcode/sc-barcode-setting.js"></script>
<script src="./component/toolbar/component/qrcode/sc-qrcode-setting.js"></script>
<script src="./component/toolbar/component/line/sc-line-setting.js"></script>
<script src="./component/toolbar/component/print/sc-print-setting.js"></script>
<script src="./component/toolbar/component/title/sc-title-setting.js"></script>
<script src="./component/toolbar/component/splitcell/sc-splitcell-setting.js"></script>
<script src="./component/toolbar/component/tablebordertype/sc-tablebordertype-setting.js"></script>
<script src="./component/toolbar/component/tableborderline/sc-tableborderline-setting.js"></script>
<script src="./component/toolbar/component/cellalign/sc-cellalign-setting.js"></script>
<script src="./component/toolbar/component/cellpadding/sc-cellpadding-setting.js"></script>
<script src="./component/toolbar/component/colrow/sc-colrowsize-setting.js"></script>
<script src="./component/toolbar/component/expression/toothmap/sc-toothmap.js"></script>
<script src="./component/toolbar/component/eleview/sc-element-view.js"></script>
<script src="./component/toolbar/component/datasource/sc-datasource.js"></script>

<script src="./component/layout/sc-layout.js"></script>
<script src="./component/toolbar/sc-toolbar.js"></script>
<script src="./component/statusbar/sc-statusbar.js"></script>

<script src="./js/s-dictionary.js"></script>
<script src="./js/s-events.js"></script>
<script src="./js/s-setting.js"></script>

<script src="./js/utils/s-offset-util.js"></script>
<script src="./js/utils/s-doc-util.js"></script>
<script src="./js/utils/s-bind-method.js"></script>
<script src="./js/utils/s-converter.js"></script>
<script src="./js/utils/s-diff-util.js"></script>
<script src="./js/utils/s-format-util.js"></script>

<script src="./js/dom/s-event-target.js"></script>
<script src="./js/dom/s-element.js"></script>
<script src="./js/dom/s-root.js"></script>
<script src="./js/dom/s-page-head.js"></script>
<script src="./js/dom/s-page-body.js"></script>
<script src="./js/dom/s-page-foot.js"></script>
<script src="./js/dom/s-text.js"></script>
<script src="./js/dom/s-table.js"></script>
<script src="./js/dom/s-paragraph.js"></script>
<script src="./js/dom/s-breakline.js"></script>
<script src="./js/dom/s-layer.js"></script>
<script src="./js/dom/s-image.js"></script>
<script src="./js/dom/s-radio.js"></script>
<script src="./js/dom/s-checkbox.js"></script>
<script src="./js/dom/s-input.js"></script>
<script src="./js/dom/s-dom-factory.js"></script>

<script src="./js/convertor/s-json-convertor.js"></script>
<script src="./js/convertor/s-xml-convertor.js"></script>

<script src="./js/actions/s-action-share.js"></script>
<script src="./js/actions/s-action-add.js"></script>
<script src="./js/actions/s-action-modify.js"></script>
<script src="./js/actions/s-action-delete.js"></script>
<script src="./js/actions/s-action-replace.js"></script>
<script src="./js/actions/s-action.js"></script>

<script src="./js/layout/s-layout-page.js"></script>
<script src="./js/layout/s-layout-pagelist.js"></script>

<script src="./js/s-paint-layer.js"></script>
<script src="./js/s-document.js"></script>

<script src="./js/s-painter.js"></script>
<script src="./js/s-engine.js"></script>
<script src="./js/s-processor.js"></script>
<script src="./js/s-editor.js"></script> 

<script>
    var containers = ["layout-container"];

    for(var i in containers){
        var layout = new scLayout({
            selector: "#" + containers[i]
        }).createView({
            component: {
                scToolbar: new scToolbar({menus: getToolbarMenus()}),
                scContextMenu: new scContextMenu({menus: getContextMenus()}),
                scStatusbar: new scStatusbar(),
                scLeftDrawer: new scDrawer("left"),
                scRightDrawer: new scDrawer("right"),
                scRulerTop: new scRuler("top"),
                scRulerLeft: new scRuler("left"),
            },
            loader: {
                editorLoader: function(subContainer, container){
                    let id = containers[i] + "-emr";
                    let body = document.createElement("div");

                    body.style.display = "flex";
                    body.style.flexDirection = "row";
                    body.style.backgroundColor = "#e5e5e5";

                    body.setAttribute("id", id);
                    subContainer.appendChild(body);

                    //编辑器
                    var editor = sEditor.instance().build({
                        container: id
                    });

                    //设置编辑器大小
                    editor.setSize({
                        height: subContainer.clientHeight - 24
                    });

                    //事件类型
                    var eventTypes = [
                        "load",
                        "zoom",
                        "resize",
                        "scroll",
                        "dblclick",
                        "mousedown",
                        "pageChange",
                        "pageSetting",
                        "titleChange",
                        "settingChange",
                        "contentChange",
                        "contentStatistics"
                    ];

                    //编辑器加载完成事件监听
                    editor.addEventListeners(eventTypes, (e, eventType)=>{
                        this.notify(eventType, e);
                    });

                    //添加容器大小改变监听
                    editor.addResizeObserver(subContainer, ()=>{
                        this.notify("resizeObserver");
                    });

                    //标尺组件
                    var rulerTop = this.getComponents("scRulerTop");
                    var rulerLeft = this.getComponents("scRulerLeft");

                    //标尺参数
                    let param = {
                        boundRect: editor.executeCommand("getEditBoundRect"),
                        paper: editor.executeCommand("getPageSetting")
                    };

                    //将标尺加入容器
                    subContainer.prepend(rulerTop.createView(param));
                    body.prepend(rulerLeft.createView(param));

                    let beforeNotify = (name, value)=>{
                        return editor.executeCommand(name);
                    };

                    //标尺添加事件监听
                    rulerTop.addEventListener("beforeNotify", beforeNotify);
                    rulerLeft.addEventListener("beforeNotify", beforeNotify);

                    let change = (name, value)=>{
                        editor.executeCommand(name, value);
                    };

                    rulerTop.addEventListener("change", change);
                    rulerLeft.addEventListener("change", change);

                    //执行命令回调
                    var executeCommand = (command, value, option)=>{
                        let result = editor.executeCommand(command, value, option);
                        if(result === false){
                            return this.executeCommand(command, value, option);
                        }
                        return result;
                    };

                    //工具条添加点击事件监听
                    this.getComponents("scToolbar").addEventListener("click", executeCommand);

                    //状态条添加点击事件监听
                    this.getComponents("scStatusbar").addEventListener("click", executeCommand);

                    //右键菜单
                    let contextmenu = this.getComponents("scContextMenu");
                    document.body.appendChild(contextmenu.createView());
                    contextmenu.addEventListener("click", executeCommand);
                }
            }
        });
    }
</script>

</html>